import { Component, OnInit, Input, Output, OnChanges, SimpleChanges, EventEmitter } from '@angular/core';
import { optionsData, seriesData } from "../../../performance/farm-power-assess/assess-column-echart/echarts.model";

@Component({
  selector: 'app-quota-echarts',
  templateUrl: './quota-echarts.component.html',
  styleUrls: ['./quota-echarts.component.css']
})
export class QuotaEchartsComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

  /**
	   * echarts实例对象
	   * 
	   * @private
	   * @type {*}@memberof CompareEchartsComponent
	   */
  private echartsIntance: any = null;

	/**
	 * 父组件输入echarts参数
	 * 
	 * @private
	 * @type {*}@memberof CompareEchartsComponent
	 */
  @Input() series: seriesData[];
  @Input() xAxisData: string[] = [];
  @Input() quotaName: string;

  //传入父组件的farmId
  @Output() onFarmColumnClick = new EventEmitter<number>();

  options: optionsData;
  tooltip: object;
  xAxis: object;
  yAxis: any[];
  grid: object;
  legend?: object;
  isFirst: boolean = true;

  ngOnChanges(changes: SimpleChanges) {
    if (changes['series'] && changes['series'].currentValue) {
      if (!this.isFirst) {
        this.options.yAxis[0]['name'] = this.quotaName;
        this.updateEchart();
      } else {
        this.isFirst = false;
        this.initOptions();
      }
    }
    if (changes['xAxisData'] && changes['xAxisData'].currentValue) {
      if (!this.isFirst && this.echartsIntance) {
        this.options.xAxis['data'] = this.xAxisData;
        this.options.series = this.series;
        this.echartsIntance.setOption(this.options, true);
      } else {
        this.isFirst = false;
        this.initOptions();
      }
    }
  }

  initOptions() {
    this.tooltip = {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999'
        }
      }
    },
      this.legend = {
        data: [
        ]
      }
    this.grid = {
      left: '3%',
      right: '2%',
      bottom: '10%',
      containLabel: true
    },
      this.xAxis = {
        type: 'category',
        data: this.xAxisData,
        axisPointer: {
          type: 'shadow'
        },
        axisLine: {
          lineStyle: {
            color: '#35789d',
            width: 2
          }
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: '#43a0b3',
            fontSize: 12
          },
          margin: 10,
        },
      },
      this.yAxis = [
        {
          type: 'value',
          name: this.quotaName,
          axisLabel: {
            formatter: '{value}',
            textStyle: {
              color: '#43a0b3'
            },
          },
          axisLine: {
            lineStyle: {
              color: '#35789d',
              width: 2
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#1b4268',
            }
          }

        }
      ]
    if (this.options == null) {
      this.options = {
        tooltip: this.tooltip,
        grid: this.grid,
        xAxis: this.xAxis,
        yAxis: this.yAxis,
        legend: this.legend,
        series: this.series
      };
    }
  }

	/**
	 * 初始化echarts实例
	 * 
	 * 
	 * @memberof CompareEchartsComponent
	 */
  onChartInit(ec: any) {
    this.echartsIntance = ec;
    ec.on('click', (params) => {

      
      let farmId = params.data.id;
      this.onFarmColumnClick.emit(farmId);
    })
  
  }

	/**
	 * 更新echarts实例数据
	 * 
	 * 
	 * @memberof CompareEchartsComponent
	 */
  updateEchart() {
    if (this.echartsIntance != null) {
      this.options.tooltip = this.tooltip;
      this.options.series = this.series;
      this.echartsIntance.setOption(this.options);

    };
  }


}



// WEBPACK FOOTER //
// ./src/app/module/data-analysis/quota-rank/quota-echarts/quota-echarts.component.ts